<template>
  <div class="cinema" @click="toCinemaDetail">
    <div class="left">
      <p class="name">{{ cinema.name }}</p>
      <p class="address">{{ cinema.address }}</p>
    </div>
    <div class="right">
      <p class="price">
        <span class="price-icon">￥</span>
        <span class="price-num">{{ cinema.lowPrice / 100 }}</span>
        <span class="price-text">起</span>
      </p>
      <p class="distance">{{ cinema.Distance | formatDis }} km</p>
    </div>
  </div>
</template>
  
<script>
export default {
  props: {
    cinema: {
      type: Object,
      default: () => {},
    },
    showDate: {
      type: Number,
      default: 0,
    },
    from: {
      type: String,
      default: 'film'
    }
  },
  data() {
    return {
      filmId: this.$route.params.filmId,
    };
  },
  filters: {
    formatDis(val) {
      return (val / 1000).toFixed(2);
    },
  },
  methods: {
    toCinemaDetail() {
      if (this.from === 'film'){
        this.$router.push(
          `/cinema/${this.cinema.cinemaId}/film/${this.filmId}/${this.showDate}`
        );
      }else {
        this.$router.push(
          `/cinema/${this.cinema.cinemaId}/film`
        );
      }
    },
  },
};
</script>
  
<style scoped>
.cinema {
  display: flex;
  border-bottom: 1px solid #ededed;
  padding: 15px;
  background: #fff;
}

.right {
  color: #ff5f16;
  width: 70px;
  text-align: right;
}

.left {
  width: calc(100vw - 100px);
}

.name {
  font-size: 15px;
  margin-bottom: 5px;
  color: #191a1b;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.address {
  font-size: 13px;
  color: #797d82;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price {
  font-size: 12px;
}

.price-num {
  font-size: 15px;
}

.distance {
  color: #797d82;
  font-size: 10px;
  line-height: 26px;
}
</style>